<template>
  <view class="container">
    <view class="medical-detail">
      <view class="visit-info">
        <view class="hosipital">{{ detail.hospitalName }}</view>
        <view class="department">就诊科室：{{ detail.departmentName }}</view>
        <view class="visit-time">就诊日期：{{ proxy.utils.date.format(detail.visitTime, 'yyyy年MM月dd日') }}</view>
      </view>
      <view class="detail">
        <view class="item-wrap" v-for="(item) of filterKeys" :key="item">
          <view class="item">
            <view class="name">{{ keyMap[item] }}</view>
            <view class="content">
              {{ detail[item] || '暂无内容' }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="image-wrap">
      <view class="name">原始图片</view>
      <view class="content">
        <image v-for="item in detail.urls" :key="item" :src="item" class="img" @tap.stop="previewImage(item)"></image>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getOutpatientRecordDetail } from '@/request/apis/archive'

const { proxy } : any = getCurrentInstance();
const filterKeys = ['chiefComplaint', 'currentMedicalHistory', 'physicalExamination', 'diagnosis', 'treatmentSuggestion']
const keyMap = {
  chiefComplaint: '病人主诉',
  currentMedicalHistory: '现病史',
  physicalExamination: '体格检查',
  diagnosis: '诊断',
  treatmentSuggestion: '处理及建议'
}

const detail = ref({})
const getDetail = (id: string) => {
  uni.showLoading({
    title: '加载中'
  })
  getOutpatientRecordDetail({ id }).then(res => {
    uni.hideLoading()
    detail.value = res
    detail.value.urls = res.fileUrls?.split(',') || []
  })
}
const previewImage = (url: string) => {
  uni.previewImage({
    current: url,
    urls: detail.value.urls
  })
}
onLoad((options) => {
  getDetail(options.id)
})
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #F3F7F8;
  padding-top: 32rpx;
  padding-bottom: calc(48rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(48rpx + env(safe-area-inset-bottom));
  .medical-detail {
    background-image: url('https://ainengli.meilianshuke.com/jkhx/patient/medical-detail-bg.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin: 0 32rpx 32rpx;
    border-radius: 24rpx;
    .visit-info {
      display: flex;
      flex-direction: column;
      gap: 16rpx;
      color: #fff;
      padding: 40rpx;
      font-size: 28rpx;
      .hosipital {
        font-size: 40rpx;
        font-weight: bold;
      }
    }
    .detail {
      border-radius: 24rpx;
      background: linear-gradient(to bottom, #d4fff6 0%, #ffffff 76rpx, #ffffff 100%);
      padding: 0 32rpx 32rpx;
      color: #222;
    }
  }
  .item {
    color: #222;
    padding-top: 64rpx;
    .content {
      padding: 24rpx;
      border-radius: 16rpx;
      font-size: 28rpx;
      margin-top: 24rpx;
      line-height: 1.8;
      background: #fafafa;
    }
  }
  .item-wrap:is(:first-child) .item {
    padding-top: 32rpx;
  }
  .item-wrap {
    position: relative;
  }
  .item-wrap:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: -32rpx;
    left: 0;
    width: 100%;
    height: 1px; /* 初始高度为 1px */
    background-color: #e5e6eb;
    transform: scaleY(0.5); /* 缩放高度为 0.5 */
    transform-origin: top; /* 从顶部开始缩放 */
  }
  .name {
    font-size: 32rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
    &::before {
      content: '';
      display: inline-block;
      width: 8rpx;
      height: 36rpx;
      margin-right: 16rpx;
      background-color: #00d1b6;
      border-radius: 0 8rpx 8rpx 0;
    }
  }
  .image-wrap {
    margin: 32rpx 32rpx 0;
    border-radius: 24rpx;
    background: #fff;
    padding: 32rpx;
    .content {
      display: flex;
      flex-wrap: wrap;
      gap: 24rpx;
      margin-top: 20rpx;
      .img {
        width: 140rpx;
        height: 140rpx;
        border-radius: 4rpx;
      }
    }
  }
}
</style>
